<template>
  <vxe-table-colgroup
    :level-num="coloumnHeader.levelNum"
    :title="coloumnHeader.label"
    :field="coloumnHeader.value"
    :width="baseWidthVariable"
    :min-width="baseWidthVariable"
    show-overflow-tooltip
  >
    <template v-for="item in coloumnHeader.children">
      <tableColumn
        v-if="item.children && item.children.length>0"
        :key="item.id+Math.random()+''"
        :coloumn-header="item"
      />
      <!-- 最底级 -->
      <template v-else>
        <vxe-table-column
          :key="item.id+Math.random()+''"
          :width="baseWidthVariable"
          :min-width="baseWidthVariable"
          :level-num="item.levelNum"
          :field="item.value"
          :type="item.type"
          :title="item.label"
          show-overflow-tooltip
        />
      </template>
    </template>
  </vxe-table-colgroup>
</template>
<script>
import commonVariable from '@/utils/commonVariable';
export default {
  name: 'TableColumn',
  props: {
    coloumnHeader: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      baseWidthVariable: commonVariable.baseWidthVariable
    };
  }
};
</script>
